<template>
  <div id="app" class="skTableHeader">
    <a-row type="flex" :gutter="[12, 28]">
      <a-col>
        <a-select
          default-value=""
          v-model="dataForm.classId"
          class="class-select"
          style="width: 90px;"
          @change="getDetail('class')"
        >
          <a-select-option v-for="item in classList" :key="item.id" :value="item.id">
            {{ item.className }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col v-if="dataForm.classId != ''">
        <j-dict-select-tag  ref="studentRef"
          type="list" 
          v-model="dataForm.studentId"
          @change="handleChangeStudent()"
          :dictCode="`sk_student,name,id,del_flag=0 and class_id=${dataForm.classId ? dataForm.classId : undefined}`" placeholder="学生" 
          :allowClear="true"
          style="width: 120px;"  />
      </a-col>
      <a-col>
        <a-select
          default-value="学期"
          v-model="dataForm.semesterHistoryId"
          class="class-select"
          style="width: 190px;"
          @change="getDetail('historySem')"
        >
          <a-select-option value="学期">
            学期
          </a-select-option>
          <a-select-option v-for="item in SemesterList" :key="item.id" :value="item.id">
            {{ item.semesterName }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col v-if="classId != ''">
        <a-select
          default-value="月份"
          v-model="dataForm.monthValue"
          class="class-select"
          style="width: 190px;"
          @change="getDetail('month')"
        >
          <a-select-option v-for="item in monthColumns" :key="item" :value="item">
            {{ item }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col>
        <a-button type="primary" icon="download" @click="handleDownload">导出</a-button>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import { skClassList, querySkSemester } from '@/api/management.js'
export default {
  name: 'skTableHeader',
  data() {
    return {
      dataForm: {
        dateType: 'sem',
        semesterId: '',
        semesterHistoryId: '学期',
        classId: '',
        studentId: undefined,
        monthValue: '',
        startDate: '',
        endDate: '',
        daysColums:[]
      },
      defaultSemester: {},
      defaultSemesterId: '',
      dataTypeList: [
        { dateName: '本周', id: 'week' },
        { dateName: '本月', id: 'month' },
        { dateName: '本学期', id: 'sem' }
      ],
      monthColumns: [],
      classList: [],    //班级列表
      SemesterList:[],   //学期列表
    }
  },
  props:["classId","semesterId"],
  components: {},
  filters: {},
  
  computed: {},
  
  created() {
    this.dataForm.dateType = 'historySem';
    this.getClassList();
    this.getSkSemester();
    // setTimeout(() => {
    //   this.getDetail(this.dataForm.dateType);
    // }, 300);
  },
  
  activated() {
  },

  mounted() {
  },

  methods: {
    // 班级列表
    getClassList() {
      skClassList()
        .then(res => {
          if (res.success) {
            if(res.result.length == 0) {
              this.$message.warning('请设置班级')
              return
            }
            this.dataForm.classList = res.result
            this.classList = res.result
            this.classList.unshift({ className: '全园', id: '' })
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch(error => {
          console.error(error)
        })
    },
    // 学期列表
    getSkSemester() {
      querySkSemester()
        .then(res => {
          if (res.success) {
            if(res.result.records.length == 0) {
              this.$message.warning('请设置学期')
              return
            }
            this.SemesterList = res.result.records
            this.getDefultSemesterId();
            this.getDetail(this.dataForm.dateType);
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch(error => {
          console.error(error)
        })
    },
    getDetail(dateType){
      console.log('dateType', dateType)
      if(dateType == "historySem") {
        if (this.dataForm.semesterHistoryId == "学期") {
          this.dataForm.semesterId = this.defaultSemester.id;
          this.dataForm.semester = this.defaultSemester;
        } else {
          this.dataForm.semesterId = this.dataForm.semesterHistoryId;
          this.dataForm.semester = this.SemesterList.find(item => item.id == this.dataForm.semesterId);
        }
        this.monthColumns = this.$skCommon.getMonths(this.dataForm.semester.startDate, this.dataForm.semester.endDate, 'yyyy-MM');
        this.dataForm.monthValue = this.monthColumns[0]
      }
      // if(dateType != 'month') {
      //   this.dataForm.monthValue = this.monthColumns[0]
      // }
      if(!this.dataForm.classId || dateType == "class") {
        this.dataForm.studentId = undefined
        this.dataForm.stuName = undefined
      }
      // if (dateType == "historySem") {
      //   if(this.defaultSemesterId == this.dataForm.semesterHistoryId || this.dataForm.semesterHistoryId == "学期"){
      //     this.dataForm.semesterId = this.defaultSemesterId;
      //     this.dataForm.dateType = "sem";
      //   } else {
      //     this.dataForm.dateType = "historySem";
      //     this.dataForm.semesterId = this.dataForm.semesterHistoryId;
      //   }
      //   this.dataForm.semester = this.SemesterList.find(item => item.id == this.dataForm.semesterId);
      //   this.monthColumns = this.$skCommon.getMonths(this.dataForm.semester.startDate, this.dataForm.semester.endDate, 'yyyy-MM');
      //   this.dataForm.monthValue = this.dataForm.monthValue ? this.dataForm.monthValue : this.monthColumns[0]
      // }else{
      //   this.dataForm.dateType = dateType;
      //   this.dataForm.semesterHistoryId = "学期"
      //   this.dataForm.semesterId = this.defaultSemesterId;
      // }
      this.setDaysColumns()
      this.$emit("dataFrom",this.dataForm)
    },
    setDaysColumns() {
      const monthStr = this.dataForm.monthValue;
      if(monthStr.indexOf('-') > -1){
        const monthSplits = monthStr.split('-');
        const year = Number(monthSplits[0])
        const month = Number(monthSplits[1])
        this.dataForm.startDate = this.$skCommon.formatDate(new Date(year, month-1, 1), 'yyyy-MM-dd') 
        this.dataForm.endDate = this.$skCommon.formatDate(new Date(year, month, 0), 'yyyy-MM-dd')
        // let calEnndDate = this.$skCommon.formatDate(new Date(year, month, 0), 'yyyy-MM-dd')
        this.dataForm.daysColums = this.$skCommon.getDays(this.dataForm.startDate, this.dataForm.endDate, 'yyyy-MM-dd')
      }else{
        const year = Number(monthStr.substring(0,4))
        const month = Number(monthStr.substring(5))
        this.dataForm.startDate = this.$skCommon.formatDate(new Date(year, month-1, 1), 'yyyy-MM-dd') 
        this.dataForm.endDate = this.$skCommon.formatDate(new Date(year, month, 0), 'yyyy-MM-dd')
        // let calEnndDate = this.$skCommon.formatDate(new Date(year, month, 0), 'yyyy-MM-dd')
        this.dataForm.daysColums = this.$skCommon.getDays(this.dataForm.startDate, this.dataForm.endDate, 'yyyy-MM-dd')
      }
    },
    // 获取默认学期id
    getDefultSemesterId(){
      let day = Date.parse(this.$skCommon.getDate(0));
      let Semester = this.SemesterList.filter(item=>{
        let time1 = Date.parse(item.startDate);
        let time2 = Date.parse(item.endDate);
        if (day > time1 && day < time2) {
          return item.id;
        }
      })
      this.defaultSemester = Semester[0]
      this.defaultSemesterId = Semester[0].id
    },
    handleChangeStudent(val) {
      if(this.dataForm.studentId) {
        let dictOptions = this.$refs.studentRef.getCurrentDictOptions();
        let student = dictOptions.find(item => item.value == this.dataForm.studentId)
        this.dataForm.stuName = student.label;
      } else {
        this.dataForm.studentId = undefined
        this.dataForm.stuName = undefined
      }
      this.getDetail('student');
    },
    handleDownload() {
      this.$emit("export");
    }
  }
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
.date-box {
  text-align: center;
  cursor: pointer;
}
</style>
